<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Reactive web component example with subclassing</title>

    <script type="module">
      import {
        defaultState,
        ids,
        render,
        setState,
        state,
        template,
      } from "../src/base/internal.js";
      import { templateFrom } from "../src/core/htmlLiterals.js";
      import {
        createElement,
        replace,
        transmute,
      } from "../src/core/template.js";
      import ReactiveElement from "../src/core/ReactiveElement.js";

      class IncrementDecrement extends ReactiveElement {
        get buttonPartType() {
          return this[state].button;
        }
        set buttonPartType(buttonPartType) {
          this[setState]({ buttonPartType });
        }

        get [defaultState]() {
          return Object.assign(super[defaultState], {
            buttonPartType: "button",
            value: 0,
          });
        }

        [render](changed) {
          super[render](changed);
          if (changed.buttonPartType) {
            transmute(this[ids].decrement, this[state].buttonPartType);
            this[ids].decrement.addEventListener("click", () => {
              this.value--;
            });
            transmute(this[ids].increment, this[state].buttonPartType);
            this[ids].increment.addEventListener("click", () => {
              this.value++;
            });
          }
          if (changed.value) {
            const { value } = this[state];
            this.style.color = value < 0 ? "red" : null;
            this[ids].visibleValue.textContent = value;
          }
        }

        // Provide a public property that gets/sets state.
        get value() {
          return this[state].value;
        }
        set value(value) {
          this[setState]({
            value: parseInt(value),
          });
        }

        get [template]() {
          return templateFrom.html`
            <button id="decrement">-</button>
            <span id="visibleValue"></span>
            <button id="increment">+</button>
          `;
        }
      }

      customElements.define("increment-decrement", IncrementDecrement);

      class CustomButton extends ReactiveElement {
        get [template]() {
          return templateFrom.html`
          <style>
            button {
              border: 1px solid gray;
              background: darkgray;
              color: white;
            }
          </style>
          <button><slot></slot></button>
        `;
        }
      }
      customElements.define("custom-button", CustomButton);

      class CustomIncrementDecrement extends IncrementDecrement {
        get [defaultState]() {
          return Object.assign(super[defaultState], {
            buttonPartType: CustomButton,
          });
        }
      }

      customElements.define(
        "custom-increment-decrement",
        CustomIncrementDecrement
      );
    </script>
  </head>

  <body>
    <p>
      This shows a plain increment/decrement component and a subclass with
      styling and custom behavior.
    </p>
    <increment-decrement></increment-decrement>
    <increment-decrement button-part-type="custom-button"></increment-decrement>
    <custom-increment-decrement></custom-increment-decrement>
  </body>
</html>
